<template>
  <div class="co_Collection wrapper">
    <swipeout>
      <swipeout-item
        transition-mode="follow"
        v-for="(item,index) in co_Collection_list"
        v-show="co_Collection_list.length>0 && item.del_type == null"
        :key='index'
      >
        <div slot="right-menu">
          <swipeout-button
            backgroundColor='#d8d8d8'
            @click.native="co_co_quxiao(item.curriculum_id)"
            :width="75"
          >取消收藏</swipeout-button>
        </div>
        <div
          slot="content"
          class="co_Collection_list"
        >
          <div
            class="co_co_img"
            @click="godetail(item.curriculum_id)"
          >
            <img
              :src="item.cover"
              alt=""
            >
          </div>
          <div class="co_co_title">
            <div>
              <p @click.self="godetail(item.curriculum_id)">{{item.title}}</p>
            </div>
            <div>
              <span @click.self="godetail(item.curriculum_id)">{{item.c_number}}次学习</span>
            </div>
          </div>
        </div>
      </swipeout-item>
    </swipeout>
    <div
      class="co_kong"
      v-if="co_Collection_list.length == 0"
    >
      <div class="pso">
        <kong
          :type='co_kong'
          :marginTop="13"
        ></kong>
      </div>
    </div>
    <div
      class="co_co_pop"
      v-show="Coco_pop"
      @click.self="coco_close"
    >
      <div class="cc_pop">
        <div>
          <div
            class="cc_pop_img"
            @click="co_co_quxiao"
          >
            <img
              src="https://o6wndwjxn.qnssl.com/ysc.svg"
              alt=""
            >
          </div>
        </div>
        <div @click.self="coco_close">关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
// import Recommend from '@/components/curriculum/Recommend'
import kong from '@/components/public/kong.vue'
import { GroupTitle, Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
import {
  search_popularity
} from '@/api/mycourse'
import {
  collection_onclick,
  user_ke
} from '@/api/center'
import {
  mapState
} from 'vuex'
export default {
  components: {
    kong,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      co_Collection_list: [],
      Coco_pop: false,
      coco_number: 0,
      co_kong: '收藏记录',
      page: 1,
      pageshow: 20,
      guessListArr: ''
    }
  },
  created () {
    this.getData()
    this.guessList()
  },
  methods: {
    guessList () {
      let obj = {
        page: 1,
        pageshow: 2
      }
      search_popularity(obj).then(res => {
        if (res.data.code === 200) {
          res.data.data.splice(res.data.data.length - 1, 1)
          this.guessListArr = res.data.data
        }
      })
    },
    godetail (id) {
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/coursedetails',
          query: {
            curriculumId: id
          }
        })
      } else {
        window.location.href = `/coursedetails?curriculumId=${id}`
      }
    },
    getData () {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        type: 3,
        status: 1,
        page: this.page,
        pageshow: this.pageshow
      }
      user_ke(requery).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let { code, data } = res.data
        if (code === 200) {
          if (this.page === 1) {
            this.co_Collection_list = data
            let wrapper = document.querySelector('.wrapper')
            this.scroll = new BScroll(wrapper, {
              click: true,
              scrollY: true,
              tap: true,
              probeType: 3,
              pullUpLoad: {
                threshold: -10,
                moreTxt: 'moreTxt',
                noMoreTxt: 'There is no more data'
              }
            })
            this.scroll.on('pullingUp', () => {
              this.getData()
              this.scroll.finishPullUp()
              this.scroll.refresh()
            })
          } else {
            this.co_Collection_list = [...this.co_Collection_list, ...data]
          }
          this.page = this.page + 1
        } else {
        }
      })
    },
    co_co_pop_click (e) {
      this.Coco_pop = true
      this.coco_number = e
    },
    co_co_quxiao (e) {
      this.coco_number = e
      this.page = 1
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        curriculum_id: this.coco_number
      }
      collection_onclick(requery).then(res => {
        let { code, data } = res.data
        if (code == 200) {
          this.getData()
          this.Coco_pop = false
        }
      })
    },
    coco_close () {
      this.Coco_pop = false
    }
  }
}
</script>

<style>
.pso {
  position: relative;
  height: 260px;
  top: -200px;
}
.look-more {
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: #f39800;
  letter-spacing: 0.48px;
  text-align: center;
  width: 100%;
  text-align: center;
  margin: calc(100vw * 60 / 750) 0;
}
.co_Collection {
  overflow: hidden;
  height: calc(100vh);
}
.co_Collection_list {
  display: flex;
  margin: calc(100vw * 60 / 750) 5%;
  height: calc(100vw * 145 / 750);
  overflow: hidden;
  /* border-bottom: 1px solid #eeeeee; */
}
.co_co_img {
  margin-right: calc(100vw * 14 / 750);
}
.co_co_img > img {
  width: calc(100vw * 264 / 750);
  height: calc(100vw * 145 / 750);
  object-fit: cover;

  border-radius: 4px;
}
.co_co_title {
  flex: 1;
  position: relative;
}
.co_co_title > div:nth-child(1) {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: bold;
}
.co_co_title > div:nth-child(1) p {
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: calc(100vw * 30 / 750);
  color: #333333;
}
.co_co_title > div:nth-child(2) {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vw * 20 / 750);
  line-height: calc(100vw * 20 / 750);
  font-size: calc(100vw * 22 / 750);
  color: #999999;
}
.co_co_operation {
  position: absolute;
  right: 10px;
  top: -150%;
  width: 30px;
  height: 30px;
}
.co_co_pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}
.cc_pop {
  width: 100%;
  height: 30vh;
  position: absolute;
  left: 0;
  bottom: 0;
  background: white;
  overflow: hidden;
}
.cc_pop > div:nth-child(1) {
  height: calc(30vh - 50px);
  text-align: center;
  overflow: hidden;
}
.cc_pop_img {
  height: 16vh;
  width: 16vh;
  margin: 0 auto;
  margin-top: 3vh;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  overflow: hidden;
}

.cc_pop_img > img {
  height: 6vh;
  margin-top: 5vh;
}
.cc_pop > div:nth-child(2) {
  height: 50px;
  border-top: 1px solid #eeeeee;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
  color: #666666;
}
.recommend-box {
  width: calc(100% - 20 * 2px);
  margin: 0 auto;
}
.guess-link {
  width: calc(100% - 20 * 2px);
  margin: calc(100vw * 60 / 750) auto calc(100vw * 50 / 750) auto;
  font-family: PingFangSC-Semibold;
  font-size: calc(100vw * 36 / 750);
  color: #333333;
  letter-spacing: 0.61px;
  text-align: left;
}
</style>
